<template>
  <div class="code-editor-demo-container">
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span>代码编辑器示例</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="editor-section">
            <h3>代码编辑器</h3>
            <CodeEditor v-model="codeContent" :language="selectedLanguage" :height="400" @change="handleCodeChange" />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <div class="control-section">
            <h3>编辑器控制</h3>
            <el-form label-width="100px">
              <el-form-item label="编程语言">
                <el-select v-model="selectedLanguage" placeholder="选择语言">
                  <el-option v-for="lang in languageOptions" :key="lang.value" :label="lang.label"
                    :value="lang.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="只读模式">
                <el-switch v-model="readonlyMode" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="setSampleCode">设置示例代码</el-button>
                <el-button @click="clearCode">清空代码</el-button>
                <el-button @click="formatCode">格式化代码</el-button>
                <el-button @click="copyCode">复制代码</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="preview-section">
            <h3>代码预览</h3>
            <pre class="code-preview">{{ codeContent }}</pre>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CodeEditor from '@/components/CodeEditor.vue'

// 响应式数据
const codeContent = ref('')
const selectedLanguage = ref('javascript')
const readonlyMode = ref(false)

// 语言选项
const languageOptions = [
  { label: 'JavaScript', value: 'javascript' },
  { label: 'TypeScript', value: 'typescript' },
  { label: 'HTML', value: 'html' },
  { label: 'CSS', value: 'css' },
  { label: 'JSON', value: 'json' },
  { label: 'Python', value: 'python' },
  { label: 'Java', value: 'java' },
  { label: 'SQL', value: 'sql' }
]

// 处理代码变化
const handleCodeChange = (value: string) => {
  console.log('代码已更改:', value)
}

// 设置示例代码
const setSampleCode = () => {
  const sampleCodes: Record<string, string> = {
    javascript: `// JavaScript 示例代码
function helloWorld() {
  console.log("Hello, World!");
}

const obj = {
  name: "Vue",
  version: 3.0,
  features: ["Reactivity", "Components", "Directives"]
};

helloWorld();`,
    html: `<!DOCTYPE html>
<html>
<head>
  <title>示例页面</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>这是一个示例HTML页面。</p>
  <ul>
    <li>Vue.js</li>
    <li>Element Plus</li>
    <li>TypeScript</li>
  </ul>
</body>
</html>`,
    css: `/* CSS 示例代码 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}`,
    json: `{
  "name": "super-admin",
  "version": "1.0.0",
  "description": "一个基于Vue 3和Element Plus的管理系统",
  "main": "src/main.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "element-plus": "^2.11.0"
  }
}`
  }

  codeContent.value = sampleCodes[selectedLanguage.value] || '// 请选择一种编程语言查看示例代码'
}

// 清空代码
const clearCode = () => {
  codeContent.value = ''
  ElMessage.success('代码已清空')
}

// 格式化代码
const formatCode = () => {
  // 这里可以调用编辑器的格式化方法
  ElMessage.info('格式化功能需要在编辑器中使用')
}

// 复制代码
const copyCode = () => {
  // 这里可以调用编辑器的复制方法
  ElMessage.info('复制功能需要在编辑器中使用')
}
</script>

<style scoped>
.code-editor-demo-container {
  padding: 0px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.demo-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-section h3,
.control-section h3,
.preview-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #303133;
}

.code-preview {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>